<template>
    <div class="root">
        <div class="head-lable">
            <span class="headTitle">{{ headTitle }}</span>
        </div>
        <div class="right-menu">
            <span class="username">Hi,{{username}}</span>
            <el-tooltip content="退出登录">
                <el-button @click="logout" size="mini" type="danger" icon="el-icon-switch-button" circle></el-button>
            </el-tooltip>
        </div>
    </div>
</template>

<script>
import router from '@/router';
import api from '@/api/request.js'

export default {
    props: ['headTitle'],
    data () {
        return {
            username: ''
        }
    },
    methods: {
        getEmpName() {
            api.getEmpById(localStorage.getItem('employee')).then(res => {
                if(String(res.data.code) === '1') {
                    this.username =  res.data.data.name;
                }else {
                    this.$message.error(res.data.msg);
                }
            })
        },
        logout() {
            api.logoutApi().then(res => {
                if(String(res.data.code) === '1') {
                    localStorage.removeItem('employee');
                    this.$message.success(res.data.data);
                    // 退出成功后进行路由跳转
                    router.push('/login');
                } else {
                    this.$message.error('退出异常');
                }
            })
        }
    },
    created () {
        this.getEmpName();
    }
}
</script>

<style scoped>
    .root {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 100%;
    }

    .headTitle {
        color: #fff;
        font-size: 18px;
        font-weight: 600;
    }

    .username {
        color: #ccc;
        padding-right: 10px;
    }
</style>